import React, {memo, useRef, useState} from "react";
import {Dropdown, Menu, message} from "antd";
import {useSelector} from "react-redux";
import {MENU_STYLE} from "../config";
import {deepClone, getRandomColor} from "../../../../common/utils";
import {useDebounce} from "../../../../common/myHooks";

export default memo(function PlateTargetLibrary(props) {
  const {isCN} = useSelector(state => ({
    isCN: state.languageReducer.isCN
  }));
  const {targetLibrary, setTargetLibrary, setTargetLibraryStorage, getTargetLibraryLocalStorage, setShowTargetsLibrary, channels} = props;
  const targetLibraryColorInput = useRef();  //  target library颜色选择器
  const [targetLibraryIndex, setTargetLibraryIndex] = useState(0);  //  选择的target的索引
  const [targetChannelMenu] = useState(() => channels.map(channel => channel.lists.filter(item => item.isSelected)).flat().map(item => item.name)); //  target channel菜单(setting中选中的所有channel)
  const targetQuencher = ["NFQ-MGB", "TAMRA", "None"]; //  target Quencher
  let cloneTargetLibrary = [];

  //  增加一个Target library
  function addTargetLibrary() {
    cloneTargetLibrary = deepClone(targetLibrary, cloneTargetLibrary);
    cloneTargetLibrary.push({
      name: "",
      color: getRandomColor(),
      channel: "",
      quencher: "",
      writable: false,
      selected: false
    });
    setTargetLibrary(cloneTargetLibrary);
  }

  //  删除一个Target library
  function removeTargetLibrary() {
    cloneTargetLibrary = deepClone(targetLibrary, cloneTargetLibrary);
    cloneTargetLibrary.some((item, index) => item.selected && cloneTargetLibrary.splice(index, 1));
    setTargetLibrary(cloneTargetLibrary);
  }

  //  保存Target library
  function saveTargetLibrary() {
    let targetLibraryLocalStorage = new Map();
    targetLibrary.forEach(item => targetLibraryLocalStorage.set(item.name, {...item, writable: false, selected: false}));
    localStorage.setItem("targetLibraryLocalStorage", JSON.stringify(Array.from(targetLibraryLocalStorage)));
    setTargetLibraryStorage(getTargetLibraryLocalStorage());
    message.info("Save success");
  }

  //  显示Target library颜色板
  function showLibraryColorSetting(indey) {
    setTargetLibraryIndex(indey);
    targetLibraryColorInput.current.click();
  }

  //  改变Target library颜色
  const changeTargetLibraryColor = useDebounce(value => {
    cloneTargetLibrary = deepClone(targetLibrary, cloneTargetLibrary);
    cloneTargetLibrary[targetLibraryIndex].color = value;
    setTargetLibrary(cloneTargetLibrary);
  }, 500);

  //  改变Target library
  function changeTargetLibrary(value, indey, type) {
    cloneTargetLibrary = deepClone(targetLibrary, cloneTargetLibrary);
    cloneTargetLibrary[indey][type] = value;
    setTargetLibrary(cloneTargetLibrary);
  }

  //  选择Target library
  function selectSingleTargetLibrary(indey) {
    cloneTargetLibrary = deepClone(targetLibrary, cloneTargetLibrary);
    cloneTargetLibrary.forEach(item => item.selected = false);
    cloneTargetLibrary[indey].selected = true;
    setTargetLibrary(cloneTargetLibrary);
  }

  //  设置Target library name可输入
  function inputTargetLibraryName(indey) {
    cloneTargetLibrary = deepClone(targetLibrary, cloneTargetLibrary);
    cloneTargetLibrary[indey].writable = true;
    setTargetLibrary(cloneTargetLibrary);
  }

  //  设置Target library name不可输入
  function preventTargetLibraryInput() {
    cloneTargetLibrary = deepClone(targetLibrary, cloneTargetLibrary);
    cloneTargetLibrary.forEach(item => item.writable = false);
    setTargetLibrary(cloneTargetLibrary);
  }

  return (
    <div className="plateTargetsLibrary">
      <header>
        <div>
          <p>{isCN ? "定义目标基因" : "Define Target"}</p>
          <p onClick={() => setShowTargetsLibrary(false)}/>
        </div>
        <hr/>
      </header>
      <ul>
        <li>{isCN ? "名称" : "Name"}</li>
        <li>{isCN ? "颜色" : "Color"}</li>
        <li>{isCN ? "通道" : "Channel"}</li>
        <li>{isCN ? "淬灭基团" : "Quencher"}</li>
      </ul>
      <section className="scrollBarStyle">
        <input ref={targetLibraryColorInput} type="color" style={{display: "none"}}
               onChange={e => changeTargetLibraryColor(e.target.value)}
        />
        {
          targetLibrary.map((item, index) => (
            <ul key={item.color + index} className={item.selected ? "platePageTargetLibrarySelected" : null}>
              <input type="text" value={item.name}
                     onClick={() => selectSingleTargetLibrary(index)}
                     onDoubleClick={() => inputTargetLibraryName(index)}
                     onBlur={preventTargetLibraryInput}
                     onChange={e => changeTargetLibrary(e.target.value, index, "name")}
                     readOnly={!item.writable}
              />
              <li>
                <div style={{backgroundColor: `${item.color}`}} onClick={() => showLibraryColorSetting(index)}/>
              </li>
              <Dropdown
                overlay={
                  <Menu>
                    {
                      targetChannelMenu.map(channel => (
                        <Menu.Item key={channel}>
                          <div style={{...MENU_STYLE, width: 120}} onClick={() => changeTargetLibrary(channel, index, "channel")}>{channel}</div>
                        </Menu.Item>
                      ))
                    }
                  </Menu>
                }
                overlayClassName="antdDropDownStyle"
                overlayStyle={{backgroundColor: "transparent"}}
                placement="bottomCenter"
                trigger={['click']}
              >
                <li>{item.channel}</li>
              </Dropdown>
              <Dropdown
                overlay={
                  <Menu>
                    {
                      targetQuencher.map(quencher => (
                        <Menu.Item key={quencher}>
                          <div style={{...MENU_STYLE, width: 120}} onClick={() => changeTargetLibrary(quencher, index, "quencher")}>{quencher}</div>
                        </Menu.Item>
                      ))
                    }
                  </Menu>
                }
                overlayClassName="antdDropDownStyle"
                placement="bottomCenter"
                trigger={['click']}
              >
                <li>{item.quencher}</li>
              </Dropdown>
            </ul>
          ))
        }
      </section>
      <section>
        <div onClick={addTargetLibrary}>{isCN ? "添加新样本" : "Add New"}</div>
        <div onClick={removeTargetLibrary}>{isCN ? "删除" : "Delete"}</div>
        <div onClick={saveTargetLibrary}>{isCN ? "保存" : "Save"}</div>
      </section>
    </div>
  );
});